<template>
	<!-- 有内容页面 -->
	<view class="cart-page" v-if="cart.length>0">
		<!--地址区域-->
		<my-address></my-address>
		<!-- 购物车标题 -->
		<view class="cart-title">
			<uni-icons type="shop" size="20" class="uniIcon"></uni-icons>
			<text>购物车</text>
		</view>
		<!--购物车商品区域-->
		<view class="cart-goods-list">
			<uni-swipe-action>
				<block class="" v-for="(item, index) in cart" :key="index">
					<!--
					:show="isOpened"
					:auto-close="true"  -->
					<uni-swipe-action-item 
					:right-options="options" 
					@click="slideDel($event,item)">
						<my-goods :goods="item" :showRadio="true" :showNumBox="true" @checkThis="checkGoods"></my-goods>
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
			
		</view>
		<!-- 购物车底部结算区域 -->
		<my-account></my-account>
	</view>
	<!-- 没有内容页面 -->
	<view class="cart-page-none" v-else>
		<view class="cart-none-image">
			<image src="@/static/empty.webp"></image>
		</view>
		<view class="cart-none-text">空空如也~</view>
	</view>
</template>

<script>
	import badgeMixins from "@/mixins/badge.js"
	import { mapState, mapMutations } from "vuex"
	export default {
		mixins:[badgeMixins],
		data() {
			return {
				// isOpened: 'none', // 是否关闭左滑框
				options:[
					{
						text: '删除',
						style:{
							backgroundColor: '#c00000',
							color: '#fff'
						}
					},{
						text: '取消',
						style:{
							backgroundColor: '#dd524d',
							color: '#fff'
						}
					}
				]
			};
		},
		computed:{
			...mapState('m_cart',['cart'])
		},
		onShow(){
			console.log('onShow111111')
		},
		methods:{
			...mapMutations('m_cart', ['updateGoodsContent', 'deleteGoods']),
			// 选中商品
			checkGoods(e){
				// console.log('e',e)
				this.updateGoodsContent(e)
			},
			// 滑动删除方法
			slideDel(e,item){
				// console.log('e',e, item)
				const that = this
				if(e.index == 0){
					// 删除按钮
					uni.showModal({
						title: '提示',
						content: '是否删除此商品?',
						success: res=>{
							// console.log(res)
							// 点击确认按钮
							if(res.confirm){
								this.deleteGoods(item)
								// this.isOpened="none"
							}else if(res.cancel){
								// 点击取消按钮
							}
						}
					})
				}else if(e.index==1){
					// 取消按钮
				// console.log('e',e.index)
					// this.isOpened = 'none'
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
.cart-page{
	// background-color: #fff;
	height: 100%;
	padding-bottom: 100rpx;
	overflow-y: scroll;
	position: relative;
	box-sizing: border-box;
	
	/* 标题区域 */
	.cart-title{
		border-bottom: 1px solid #efefef;
		padding:20rpx;
		font-size: 24rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		.uniIcon{
			margin-right: 20rpx;
		}
	}
	/* 商品列表区域 */
	.cart-goods-list{
		border-bottom: 1px solid #efefef;
	}
}

/* 没有内容的页面 */
.cart-page-none{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding-top: 150px;
	.cart-none-image{
		margin-bottom: 10px;
		text-align: center;
		image{
			width: 100px;
			height: 100px;
			border-radius: 50%;
		}
	}
	.cart-none-text{
		font-size: 16px;
		color: gray;
		text-align: center;
	}
}
</style>
